import React, { useState} from 'react';
import { Column } from '@ant-design/charts';
import style from './style.module.css'

const PillarChart= () => {
    const [curInd,setInd]=useState(0)
    const time=['年','月','日']
  var data = [
    {
      type: '1月',
      sales: 260,
    },
    {
      type: '2月',
      sales: 500,
    },
    {
      type: '3月',
      sales: 340,
    },
    {
      type: '4月',
      sales: 750,
    },
    {
      type: '5月',
      sales: 840,
    },
    {
      type: '6月',
      sales: 560,
    },
    {
      type: '7月',
      sales: 410,
    },
    {
      type: '8月',
      sales: 950,
    },
    {
      type: '9月',
      sales: 670,
    },
    {
      type: '10月',
      sales: 590,
    },
    {
      type: '11月',
      sales: 850,
    },
    {
      type: '12月',
      sales: 480,
    }
    
  ];
  var config = {
    data: data,
    xField: 'type',
    yField: 'sales',
    height:180,
    label: {
      position: 'middle',
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      type: { alias: '类别' },
      sales: { alias: '销售额' },
    },
  };
  const handleTime=(ind)=>{
    setInd(ind)
  }
  return <div className={style.pillar}>
      <div className={style.order}>
          <span>订单</span>
          <ul >
          {
            time.map((item,ind)=><li key={ind}
            className={curInd===ind?style.active:''}
            onClick={()=>handleTime(ind)}
            >
            {item}</li>)
          }
          </ul>
      </div>
      <div >
      <Column {...config} />
      </div>
  </div>
};

export default PillarChart;